<template>
  <div>
    <el-table :data="klftableData" style="width: 100%" v-loading="loading">
    <el-table-column prop="orderid" label="orderid" width="120"  />
    <el-table-column prop="status" label="status" width="120"  />
    <el-table-column  prop="name" label="姓名" width="150" />
    <el-table-column prop="tel" label="电话号" width="120"  />
    <el-table-column prop="province" label="省" width="120" />
    <el-table-column prop="city" label="市" width="120" />
    <el-table-column prop="county" label="区" width="600" />
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
    
        <el-button link type="primary" size="small" @click="handleClick(scope.$index, scope.row)">修改</el-button>
      </template>
      
    </el-table-column>
  </el-table><el-pagination background layout="prev, pager, next" :total="1000"  @current-change ="changepage"/></div>


  <el-dialog v-model="dialogFormVisible" :title="isEdit ? '新增' : '编辑'">
    <el-form :model="form">
      <el-form-item label="订单ID" label-width="100px">
        <el-input v-model="form.orderid" autocomplete="off" />
      </el-form-item>
      <el-form-item label="status" label-width="100px">
        <el-input v-model="form.status" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="editSave">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
//   const handle= () => {
//   console.log('click')
// }
import { computed, ref, reactive, onMounted } from 'vue'
// import { ElMessage, ElMessageBox } from 'element-plus'
import { getOrder ,setOrder} from '@/api/order.js'
const dialogFormVisible = ref(false)
const isEdit = ref(true)
const nowdata = ref([])
const form = reactive({
  orderid: '',
  status: '',
})
const loading = ref(true)
const handleClick = (index, row) => {
  console.log(index, row)
  // 显示编辑内容
  form.orderid = row.orderid
  form.status = row.status
  dialogFormVisible.value = true
  isEdit.value = false
}

// 保存编辑内容
const editSave = async () => {
  // 什么时候关闭，一定是数据传输成功的时候
  dialogFormVisible.value = false

  if (!isEdit.value) {
    // 修改接口
    let res = await setOrder('/order/updateStatus', {
      orderid: form.orderid,
      status: form.status,
    })

    if (res.code == '200') {
      // 重新请求当前数据接口
      let res = await getOrder('/order/list')
      tableData.value = res.data
      // 路由不靠谱
      // router.push({ path: '/home/bannerList' })
    }
  }
}
const tableData = ref([])
onMounted(async () => {
  let res = await getOrder('/order/list')
  // console.log(res)
  if (res.code == '200') {
    tableData.value = res.data
    nowdata.value = res.data.slice(0,10)
    loading.value = false
    // console.log(tableData.value);
    
  }
})
const klftableData = computed(() =>
  nowdata.value.filter(
          (data,index) =>
            index <10
        )
      )
      // console.log(klftableData);

const changepage = (index) =>{
  nowdata.value=tableData.value.slice((index-1)*10,(index-1)*10+10)
}
</script>
<style lang="">
  
</style>